<template>
    <div :style="{ width: props.width, padding: props.padding, top: props.top, right: props.right, 'border-radius': props.borderRadius }"
        class="confirmPop">

        <view class="content">
            <slot></slot>
        </view>
        <div class="btnBox flex-c-b">
            <div @click.stop="emits('confirm')" style="background: #0AD45B;" class="btn flex-center-center">
                <img src="../../assets/check.png" mode="scaleToFill" />
            </div>
            <div @click.stop="emits('cancel')" style="background: #506CFF;" class="btn flex-center-center">
                <img src="../../assets/x.png" mode="scaleToFill" />
            </div>
        </div>
    </div>
</template>


<script setup>
import { ref } from 'vue'
const props = defineProps({
    width: {
        type: String,
        default: '3.36rem'
    },
    padding: {
        type: String,
        default: '0.3rem 0.7rem'
    },
    top: {
        type: String,
        default: '0.88rem'
    },
    right: {
        type: String,
        default: '0rem'
    },
    borderRadius: {
        type: String,
        default: '0px 0px 0.08rem 0.08rem;'
    }
})
const emits = defineEmits(['confirm', 'cancel'])
</script>


<style lang="less" scoped>
.confirmPop {
    position: absolute;
    background: #FFF;
    box-shadow: 0px 0.04rem 0.18rem 0px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    z-index: 999;

    .content {
        color: #1D2654;
        text-align: center;
        font-family: Avenir800;
        font-size: 0.18rem;
        font-weight: 800;
    }

    .btnBox {
        margin-top: 0.23rem;

        .btn {
            width: 0.3rem;
            height: 0.3rem;
            border-radius: 50%;

            img {
                width: 0.24rem;
                height: 0.24rem;
            }
        }

        .btn:hover {
            cursor: pointer;
        }
    }

}
</style>